
Processing 

di MATTED FIDRAVAI1TI 



Prosegue il nostro corso su Processing: in questa 
puntata vedremo come costruire unlnterf accia 
graf ica e in che modo collegarla con Arduino. 
Seconda puntata. 



rocessing e Arduino sono due realta 
molto simili, infatti il loro editor (o 
IDE) e praticamente lo stesso e la sintas- 
si da utilizzare per programmare cambia 
davvero poco tra i due. L'unica differenza 
significativa e che il loro campo di appli- 
cazione e differente, in quanto Proces- 
sing serve per scrivere software da PC, 
mentre TIDE di Arduino ci consente di 



programmare il microcontrollore che si 
trova a bordo proprio dei moduli Ardui- 
no. Qualunque sia il punto di partenza, e 
comunque molto semplice passare da un 
ambiente all'altro: da Arduino a Proces- 
sing o viceversa. Questo corso riguarda 
Processing, quindi rimandiamo chi voles- 
se approfondire la conoscenza di Arduino 
all'apposito corso; tuttavia in questa lezio- 
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ne coinvolgeremo la piattaforma Arduino 
perche intendiamo utilizzarla per testare i 
programmi d'esempio relativi agli esercizi 
che vi proponiamo. 

Per questa ragione riportiamo in queste 
pagine anche il codice per Arduino ed il 
circuito di test corrispondente. 




ma lasceremo cio come esercizio. A questo 
livello non ci sono particolari differenze, ne 
vantaggi ad utilizzare una soluzione anzi- 
che l'altra. 

Richiamati questi brevi concetti base, an- 
dremo adesso ad analizzare i codici oggetto 
di questa puntata del corso. 



COMUNICAZIONE SERIALE 

L'anello di congiunzione tra un programma 
scritto in Processing ed uno che gira su Ar- 
duino e la comunicazione seriale, la quale 
fisicamente e realizzata attraverso il cavo 
USB tramite cui Arduino e collegato al PC. 
A livello logico, nella comunicazione 
seriale vengono scambiati byte; ricordiamo 
che un byte e un numero binario di 8 bit, 
percio la rappresentazione di un byte puo 
essere un numero intero che va da 0 a 255 
oppure la rappresentazione di caratteri che 
si trovano nella tabella ASCII. Che sia un 
numero, oppure un carattere, tutto dipende 
da come interpretiamo i dati; la sostanza 
comunque non cambia, perche si tratta 
sempre di un pacchetto di 8 bit che viene 
scambiato. Concettualmente una comuni- 
cazione e definita quando conosciamo il 
supporto fisico (nel nostro caso e il colle- 
gamento USB), il livello logico (cioe come 
sono interpretati i bit) ed infine, quando e 
stabilito il protocollo di comunicazione. Nel 
caso di questo corso, saremo noi a definire il 
protocollo, cioe attribuiremo a determinati 
simboli e numeri delle funzionalita, sia 
verso Processing che verso Arduino. 
Una comunicazione deve essere opportu- 
namente gestita nelle sue fasi; solitamente 
viene definito "master" il sistema che invia 
comandi con una certa cadenza temporale 
oppure a seguito di determinati eventi, 
mentre e chiamato "slave" il sistema che 
risponde alle interrogazioni del master. In 
questa lezione stabiliremo che il software 
da PC scritto in Processing sara il master 
della comunicazione, mentre Arduino sara 
lo slave. Possiamo impostare tutto il sistema 
anche con Arduino che funziona da master, 



IL CODICE 

I programmi di esempio che vogliamo pro- 
porvi stavolta sono i seguenti. 

1. LEZIONE 2_1 BUTTON - Questo 
programma mostra come disegnare un 
pulsante, che si evidenzia quando il 
puntatore e sopra di esso e si accende se 
viene fatto clic. 

2. LEZIONE 2_2 BUTTON & LED - Rispet- 
to al programma precedente, aggiunge 
un LED che lampeggia in maniera inter- 
mittente ogni secondo. 

3. LEZIONE 2_3 BUTTON & LED + TRA- 
SMISSIONE + ARDUINO - A questo 
punto utilizziamo Arduino; l'interfaccia 
e quella del programma precedente, 
ma ad ogni secondo viene trasmesso un 
comando ad Arduino, che accendera o 
meno un LED secondo lo stato del pul- 
sante grafico. 

4. LEZIONE 2_4 BUTTON & LED + TRA- 
SMISSIONE/RICEZIONE + ARDUI- 
NO - Aggiungiamo ora la possibility di 
leggere lo stato di ingresso di Arduino; 
in pratica ad ogni secondo viene invia- 
to, da parte di Processing, lo stato del 
pulsante grafico ed Arduino risponde 
comunicando lo stato del suo pulsante 
reale. Processing accendera un ulteriore 
LED suH'interfaccia grafica. 

LEZIONE 2_1 BUTTON 
Iniziamo ora a scrivere il nostro primo pro- 
gramma di questa lezione, cioe l'implemen- 
tazione di un pulsante che si evidenzia se il 
mouse ci passa sopra e si illumina se viene 
fatto clic sopra di esso, quindi si spegne se 
f acciamo nuovamente clic. 
La strategia e relativamente semplice: 
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innanzitutto un pulsan- 
te puo essere rappresen- 
tato come un quadrato 
riempito di colore nero, 
percio evidenziare il 
rettangolo significa 
ridisegnare il quadra- 
to con il bordo giallo, 
illuminare il pulsante 
equivale a ridisegna- 
re il quadrato con il 
riempimento diverso da 
nero (magari un azzurro 
molto luminoso) come 
rappresentato in Fig. 1. 
Abbiamo quindi la 
necessita di gestire le 
primitive grafiche rect(), 
fillO, strokeO; inoltre ci 
serve una funzione che 
chiameremo overRectO, 
la quale ci restituira un 
valore logico TRUE se 
il puntatore del mouse 
sara sopra il rettangolo 
identificato come pul- 
sante, secondo quanto 
schematizzato in Fig. 2. 
Inline ci occorre una 
piccola astuzia: defi- 
niamo innanzitutto la 
variabile button come 
intero; questa variabile 
sara rappresentativa 
dello stato del pulsante. 
Poi scriveremo una fun- 
zione di riempimento in 
questo modo: 



Quando button vale 0, 
avremo questa fun- 
zione di riempimento: 
fill(0,0,0), che significa 
riempimento di colore 
nero. Se button = 1, al- 
lora si ha fill(60,130,240), 
che in questo caso corri- 
sponde al riempimento 
con un colore RGB 
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Listato 2 



definito, nello specifico, dai valori 60, 130, 
240 delle componenti cromatiche, rispetti- 
vamente, R, G, B. 

Lo stesso principio descritto per fill() vale 
anche per strokeO, cioe per il bordo del 
rettangolo. Quindi, attraverso la funzione 
overRectO identifichiamo se il puntatore e 
sopra il pulsante; se, contemporaneamente, 
il tasto del mouse e premuto, attraverso la 



H primitiva di Proces- 

H sing chiamata mouse- 

H Pressed cambiamo il 

H valore di button da 0 

H ale con esso il colo- 

^HHH H re di riempimento. II 

H codice corrisponden- 

H te airapplicazione 

H qui descritta e con- 

H tenuto nel Listato 1. 

H Analizziamo adesso, 

H piu approfondita- 

H mente ,1a funzione 

H overRectO. Diciamo 

■ innanzitutto che le 

H funzioni si scrivono 

H in fondo al program- 
ma principale; in 
pratica fuori da void draw(){}. La funzione 
in questione e definita in questo modo: 

boolean overRect(int x, int y, int w, int h){} 

Cio significa che overRect restituisce un 
valore logico che pud essere TRUE o FALSE 
e si aspetta, come parametri di ingresso, 
quattro valori interi x, y, w, e h. 
In sostanza, quando airinterno del pro- 
gramma richiamiamo questa funzione, dob- 
biamo passare la posizione x, y del rettan- 
golo e le sue dimensioni w, h; la funzione 
restituira TRUE o FALSE. 
La verifica della posizione del puntatore del 
mouse, airinterno di overRect, viene svolta 
in questo modo: 




B 




button 




Fig. 4 
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Fig. 5 




Fig. 6 




Fig. 7 
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Listato 3 



voi d draw( ) { 



//disegno del Led 
strokeWei ght(3) ; 
stroke(0, 0, 0); 

f i 1 1 (241*LED,250*LED, 18*LED) ; //il colore di riempimento del Led dipende da 1 1 a variabile LED, ovvero dal 
dal suo stato 

//se LED=0 ---> fill (0,0,0) quindi colore nero 

//se LED=1 ---> fill (241,250, 18) quindi colore giallo 

rect(20,200,40,40) ; //rettangolo che rappresenta il Led 

textC'TX", 20, 280); //etichetta 



if (mouseX >= x && mouseX <= x+w && 
mouseY >= y && mouseY <= y+h) { 
return true; 
}else{ 

return false; 



Viene, cioe, verificata una condizione con 
quattro AND logiche; il valore X del punta- 
tore deve essere maggiore della posizione x 
del rettangolo e minore della posizione x+w 
(larghezza del rettangolo), mentre il valore 
Y del puntatore deve essere maggiore della 
posizione y del rettangolo e minore di y+h 
(altezza del rettangolo). II risultato finale di 
questa prima interfaccia grafica e rappresen- 
tato nella Fig. 3, dove il pulsante e spento, 
in Fig. 4, che mostra il pulsante evidenziato 
e nella Fig. 5, dove il pulsante e acceso. 

LEZIONE 2 2 BUTTON & LED 



Aggiungiamo al programma precedente il 
comando di un LED (Listato 2). Anche in 
questo caso rappresentiamo il LED con un 
rettangolo colorato di nero se il LED e spen- 
to, ovvero di giallo se il LED e acceso. 
Innanzitutto dobbiamo cambiare l'inter- 
faccia grafica del programma precedente, 
estendendo l'area del programma ed ag- 
giungendo un nuovo rettangolo, con sotto 
l'etichetta 'TX'; il risultato si vede nella 
Fig. 6. 

Oltre a dover ridisegnare l'area dell'inter- 
faccia, abbiamo bisogno di una nuova varia- 
bile che chiameremo LED; inoltre ci servira 
ancora un'altra variabile che chiameremo 
lastUpdate e della quale analizzeremo tra 
poco la funzionalita. Anche per il LED 
useremo la stessa tecnica sviluppata per il 
pulsante, ovvero agiremo sulla funzione di 
riempimento fill() e la renderemo dipen- 
dente dalla variabile LED: 



niiiiso = e©ee 



millisQ = 9999 
millisO = 1D91 



lastUpdate = 0000 



0000 




/ 




if (mil list) - lastUpdate > 1909 ){ 
lastUpdate = millisO 



\ 



10EU 



□ 



1BG1 



millisp - 2S91 





if (miUisU - lastUpdate > 1999 ){ 
lastUpdate = millisO 

? \ 

2901 



Fig. 8 
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fill(241*LED, 
250*LED, 18*LED); 
se LED = 0, allora 

■— avremo £ill(0,0,0) 
cioe riempimento 
nero, mentre se in- 
vece LED = 1 avre- 
mo fill(241,250,18) 
che rappresenta 
un giallo acceso. 
II tutto e mostrato 
nel codice conte- 

nuto nel Listato 3. 

Supponiamo ora di voler far lampeggiare il 
LED in maniera intermittente ogni secondo. 
La prima cosa che ci viene in mente potreb- 
be essere inserire un banale ciclo di ritardo 
airinterno della funzione principale void 
draw(){}, ma questa tecnica avrebbe un 
grave effetto collaterals il pulsante non 
risponderebbe piu durante il ciclo di ritar- 
do, perche il programma sarebbe bloccato 
dentro questo ciclo e non potrebbe gestire 
le funzionalita del pulsante. 
II nostro obiettivo e, dunque, far lampeg- 
giare il LED, mantenendo contemporanea- 
mente tutte le funzionalita del pulsante. 
Una tecnica relativamente semplice per 
fare cio consiste nello sfruttare la funzione 
millisO di Processing, soprattutto perche 
essa funzione restituisce il tempo, espresso 
in millisecondi, trascorso dall'istante in cui 
l'applicazione e stata avviata. 



Quindi millisO ci restituisce un valore che 
cresce continuamente. 
Siccome vogliamo far accadere qualcosa 
(un evento) ogni secondo (1.000 ms), bastera 
salvare il valore di millisO in una variabile 
temporanea e confrontare continuamente la 
differenza tra il valore assoluto di millisO 
ed il valore precedentemente salvato. Se 
questa differenza e maggiore di 1.000, allora 
verra scatenata la relativa azione e sara nuo- 
vamente salvato il valore di millisO nella 
variabile temporanea. 
II ciclo e rappresentato nella Fig. 8. La 
funzione millisO cresce indefinitamente, 
mentre invece la variabile temporanea 
lastUpdate e inizializzata a 0 ed ogni volta 
che la differenza tra millisO ed essa e mag- 
giore di 1.000, lastUpdate viene aggiornata 
all'attuale valore di millisO. Inoltre viene 
avviata l'azione prevista. 
La porzione di codice che svolge quanto 
descritto e quella contenuta nel Listato 4. 
La Fig. 9 e la Fig. 7 mostrano come appare il 
programma definitivo, nel quale il ciclo di 
lampeggio del LED non interferisce con la 
funzionalita del pulsante. 

LEZIONE 2_3 BUTTON & LED + TRA- 
SMISSIONE + ARDUINO 
Questo terzo esempio trasforma il program- 
ma appena descritto in una vera interfaccia 
grafica capace di gestire delle funzionalita 
su Arduino. In pratica vengono aggiunte al 
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programma della lezione 2_2 le primitive 
di Processing utili per la comunicazione 
seriale. Alio stesso tempo dovremo anche 
analizzare il relativo codice di Arduino ed il 
circuito applicative 

Per accedere alle funzionalita della comuni- 
cazione seriale, dobbiamo far ricorso all'ap- 
posita libreria di Processing. II nostro terzo 
programma di esempio comincia infatti in 
questo modo: 

import processing.serial.*. 

Cio significa che inglobiamo nel program- 
ma la relativa libreria di comunicazione 
seriale; dal momento che Processing gia 
dispone di questa libreria non dovremo 
installare nulla, ma semplicemente richia- 
marla prima di tutto nel programma. 
Un'altra operazione fondamentale e nomi- 
nare la porta seriale: 

Serial myPort; 

Serial e una classe e myPort e la definizio- 



ne di un oggetto appartenente alia classe 
Serial, quindi la nostra porta di comuni- 
cazione seriale si chiamera myPort e nel 
programma si fara rif erimento ad essa. 
Ancora, pero, la porta seriale non e funzio- 
nante, perche e stata definita unicamente 
a livello astratto ma non a livello fisico; 
dobbiamo infatti specificare a quale COM e 
associata ed a che velocita comunica. Queste 
definizioni sono fatte dentro void setupO 
{}. II Listato 5 mostra come appaiono nel 
programma. 

La riga di programma seguente: 

myPort = new Serial(this, "COM9" ', 9600); 

significa che myPort (la nostra porta seriale) 
appartiene alia classe Serial, si chiama 
'COM9' e trasmette a 9.600 baud. 
II nome della porta COM che andremo a 
scrivere ("COM9", "COM6"...) deve essere 
lo stesso della porta usata da Arduino; ov- 
viamente la velocita di comunicazione deve 
essere la stessa sia per Arduino che per 
Processing (nel nostro caso appunto 9600); 



s 
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char val ; //dato ricevuto da 1 1 a porta seriale 
i n t i ; 

int LEDPi n[6] = { 

5,6,10,11,12,13}; //setup dei pin di uscita 

int i n P i n [ 6 ] = { 

2,3,4,7,8,9}; //setup dei pin usati come ingresso 



void setupO { 

for (i =0; i < 6; i++) { // conf i gurazi one dei pin di output 
pinMode(LEDPin[i], OUTPUT); 

digital WriteC LEDPin[i ] , LOW); // inizializzo 1 'uscita a 0 

} 



for (i =0; i < 6; i++) { //conf i gurazi one dei pin di input 
pinMode(inPin[i ] , INPUT); 

} 

Seri al . begi n ( 9600 ) ; // attivazione del 1 a seriale 

} 



void loopO { 

//stato di lettura e scrittura del 1 a seriale 

if ( Seri al . avai 1 abl e( ) ) { // se e disponibile un dato sul buffer seriale 

di gi tal Wri te( LEDPi n[0] , HIGH); //accendi il LED 0, i denti f i cati vo del 1 o stato del 1 a comuni cazi one 

val = Seri al . read( ) ; //il valore del buffer e 1 etto e salvato su val, una volta letto il buffer e svuotato 

i f (di gi tal Read( i nPi n[0] ) == H I GH ) { //lettura del 1 o sato del pin usato come ingresso, se lo stato e alto 
Seri al .wri te( 1 ) ; //trasmi ssi one sul 1 a seriale del valore 1 
}else{ // altrimenti 

Seri al . wri te( 2 ) ; //trasmi ssi one del valore 2 

} 

} 

//stato di decodifica del valore seriale ricevuto 

if (val == 'H') { // se il valore di val e il carattere 'H' 
di gi tal Wri te( LEDPi n [1] , HIGH); // viene acceso il LED 1 

} 

el se { 

di gi tal Wri te( LEDPi n[l] , LOW); // altrimenti LED 1 viene spento 

} 

delay(lOO); // ciclo di attesa di 100 ms 



se il nome della porta e la velocita non sono zione ovviamente avverra ogni secondo. 

rispettati, il sistema non pud funzionare. II codice modificato e quello che appare nel 

Definiamo ora un semplice protocollo: Listato 6. 

stabiliamo che se il pulsante e acceso, Dentro il ciclo di lampeggio e stata aggiun- 

viene trasmesso verso Arduino il carattere ta una condizione di verifica del valore di 

ASCII 'H', altrimenti se il pulsante e spento button ed a seconda di questo viene scritto 

trasmettiamo il carattere 'L'. II master della in myPort il carattere 'H' oppure 'L', sfrut- 

trasmissione e il programma scritto in Pro- tando la funzione myPort.write(). 

cessing e la trasmissione del comando deve Ora che il programma master e comple- 

avvenire ogni secondo. to dobbiamo impostare il sistema slave 

In pratica la struttura e gia fatta: infatti con Arduino. Innanzitutto realizziamo il 

sfrutteremo il ciclo di lampeggio del LED circuito di Fig. 10 il cui schema elettrico e 

descritto nel programma precedente ed riportato in Fig. 11; si tratta di collegare due 

aggiungeremo la comunicazione seriale del LED con le rispettive resistenze serie ed un 

carattere 'H' oppure 'L'; questa comunica- pulsante con la sua resistenza di pull-up, ai 
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setupt} 
<Jartl£iiTC ore lipjL'OJtpjt 
Serial. begin () ; 



Fig. 1H 
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loop{} 
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pin digitali di Arduino che saranno oppor- 
tunamente configurati come uscite per i 
LED e ingresso per il pulsante. 

I due LED di Arduino saranno chiamati 
LED_0 e LED_1; il primo servira per mostra- 
re che la comunicazione seriale e stabilita, 
quindi sara acceso se comunque un carat- 
tere e ricevuto, mentre LED_1 si accendera 
se il carattere ricevuto e 'H' e si spegnera in 
corrispondenza del carattere 'L'. II funzio- 
namento e rappresentato dalle Fig. 12 e Fig. 
13. Riportiamo, nel Listato 7, il codice di 
Arduino. 

Per quanto possibile, proviamo a spiegare 
in questa sede il programma per Arduino: 
il codice e strutturato in una prima fase 
in cui sono definiti e configurati i pin di 
ingresso/uscita e la porta seriale di Arduino, 
poi il programma entra nel loop principale. 
Nel loop viene continuamente verificato se 
ci sono dati nel buffer seriale: in caso aff er- 
mativo, viene acceso LED_0, quindi letto 
e salvato il dato del buffer; poi, a seconda 
dello stato del pulsante, viene trasmesso 
tramite la porta seriale un valore(l o 2) 
verso il PC. II valore letto dal buffer seriale 
viene decodificato; se e 'H' viene acceso 
LED_1, altrimenti lo stesso viene tenuto 
spento. 

II flow-chart del programma e rappresen- 
tato nella Fig. 14. II programma descritto 
ha una funzionalita in piu rispetto a quella 
necessaria per il codice di Processing qui 
descritto, in quanto il programma di Ardu- 
ino trasmette anche lo stato del pulsante. 
Questa funzionalita sara usata dal program- 
ma dell'esercizio seguente. 

LEZIONE 2_4 BUTTON & LED + TRA- 
SMISSIONE/RICEZIONE + ARDUINO 
In quest'ultimo programma aggiungiamo 
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//disegno del LedConn 
strokeWei ght(3) ; 
stroke(0, 0, 0); 

fil 1 (247*LEDConn,5*LEDConn,5*LEDConn) ; //il colore di riempimento del Led dipende da 1 1 a variabile LEDConn, 
ovvero dal dal suo stato 

//se LEDConn=0 — > fill (0,0,0) quindi colore nero 

//se LEDConn=l — > fill (247,5, 5) quindi colore rosso 
rect(20 ,350 ,40 ,40) ; //rettangolo che rappresenta il Led 
textC'RX", 20, 430); //etichetta 

if (myPort . avai 1 abl e( )>0 ) { // se e presente un dato sul buffer seriale, 

val = myPort . read( ) ; //il dato viene letto e memorizzato su val 
myPort.cl ear( ) ; //il buffer e ripulito 

if (val == 1){ //se val = 1 

LEDConn = 1; //cambia il valore di LEDConn in 1 

} 

else{ //al trimenti 

LEDConn = 0; //il valore di LEDConn e 0 

} 

} 



sull'interfaccia grafica un ulteriore LED che = myPort.readO; dopo aver letto questo va- 

rappresenta lo stato del pulsante di Ardui- lore, il buffer e ripulito attraverso myPort. 

no. Ora che sappiamo come disegnare un clear(). Verificato che c'e un valore, questo 

LED ed accenderlo, rimane solo da definire viene letto, poi il buffer e ripulito. Rimane 

a livello di programma la lettura della porta soltanto da decodificare il valore di val: se e 

seriale da parte di Processing. 1, LEDConn sara posto ad 1, altrimenti LE- 

Innanzitutto definiamo un nuovo LED che DConn sara posto a 0. La porzione di codice 

chiameremo LEDConn; questo, ovviamente, da aggiungere al programma precedente 

deve essere anche disegnato, percio proce- e illustrata nel Listato 8. 

deremo sempre come per il LED precedente: II funzionamento del sistema completo e 

si trattera di un rettangolo in cui cambiere- rappresentato in Fig. 15 e Fig. 16. 
mo il colore di riempimento a seconda del 

valore di LEDConn. Nel ciclo di trasmis- NELLE PROSSIME LEZIONI... 

sione del master verso Arduino, inseriamo Bene, per il momento abbiamo concluso. 

anche la lettura del buffer seriale del PC. Nella prossima puntata, seguendo la stessa 

Alio scopo, la prima funzione che richia- linea seguita fin qui, descriveremo come 

miamo e myPort.availabeO, la quale restitu- avviene la lettura di un valore analogico e 

isce TRUE se c'e qualcosa nel buffer, ovvero spiegheremo il funzionamento della libreria 

FALSE se non c'e nulla. firmdata, importante perche ci consentira di 

Una volta verificato che il buffer seriale e controllare direttamente Arduino da Pro- 

pieno, questo viene letto ed il valore me- cessing, senza passare per la definizione di 

morizzato in una variabile temporanea val alcun protocollo. 
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